<template>
  <div>
    <h1>添加需要被视监的UP主</h1>
    <input 
      v-model="uidToAdd" 
      type="number" 
      placeholder="Enter UID to add" 
      class="custom-input"
    />
    <button @click="addUid" class="custom-button">Add UID</button>
  </div>
</template>

<script>
import fs from 'fs';
import path from 'path';

export default {
  name: 'Page3',
  data() {
    return {
      uidToAdd: null
    };
  },
  methods: {
    async addUid() {
      if (this.uidToAdd && !isNaN(this.uidToAdd)) {
        const uidPath = path.resolve(__dirname, '../../data/uid.json');
        const jsonData = JSON.parse(fs.readFileSync(uidPath, 'utf8'));
        if (!jsonData.uids.includes(this.uidToAdd)) {
          jsonData.uids.push(this.uidToAdd);
          fs.writeFileSync(uidPath, JSON.stringify(jsonData, null, 2), 'utf8');
          this.uidToAdd = null;
        } else {
          console.log('UID already exists');
        }
      } else {
        console.log('Invalid UID');
      }
    }
  }
};
</script>

<style scoped>
.custom-input {
  width: 100px;
  height: 100px;
}

.custom-button {
  height: 40px;
}
</style>